HTML5 এ Unordered List (<ul>) এবং Ordered List (<ol>) হলো দুটি লিস্ট ফরম্যাট, যা ওয়েব পেজে তথ্য বা কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। এগুলো আইটেমগুলোর একটি তালিকা গঠন করে, যেখানে আইটেমগুলোর মধ্যে পার্থক্য রয়েছে কিভাবে সেগুলো প্রদর্শিত হয়। নিচে <ul> এবং <ol> সম্পর্কে বিস্তারিত আলোচনা করা হলো:
১. Unordered List (<ul>)
বর্ণনা
<ul>ট্যাগ ব্যবহার করে একটি অবিন্যস্ত তালিকা তৈরি করা হয়, যেখানে প্রতিটি আইটেমের সামনে একটি বুলেট পয়েন্ট (•) থাকে। এটি ক্রমহীন তালিকা প্রদর্শন করতে ব্যবহৃত হয়।- আইটেম ট্যাগ:
<ul>এর প্রতিটি আইটেম<li>(List Item) ট্যাগ ব্যবহার করে প্রদর্শিত হয়। - ব্যবহার: এমন তথ্য বা কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যেখানে আইটেমগুলোর ক্রম (অর্ডার) গুরুত্বপূর্ণ নয়। উদাহরণস্বরূপ, প্রোডাক্টের তালিকা, ফিচার লিস্ট, বা উপকরণের তালিকা।
উদাহরণ
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ফলাফল: উপরের উদাহরণে, একটি Unordered List তৈরি করা হয়েছে, যেখানে HTML, CSS, এবং JavaScript আইটেমগুলো বুলেট পয়েন্ট সহ প্রদর্শিত হবে।
CSS ব্যবহার করে Unordered List কাস্টমাইজেশন
<style>
ul {
list-style-type: square; /* Default bullet পরিবর্তন করে স্কোয়ার করা হয়েছে */
}
</style>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ব্যাখ্যা:
list-style-type: CSS প্রপার্টি ব্যবহার করে বুলেটের ধরন পরিবর্তন করা হয়েছে। এখানে, ডিফল্ট বুলেট (•) পরিবর্তন করে স্কোয়ার (■) করা হয়েছে।
২. Ordered List (<ol>)
বর্ণনা
<ol>ট্যাগ ব্যবহার করে একটি বিন্যস্ত তালিকা তৈরি করা হয়, যেখানে প্রতিটি আইটেমের সামনে সংখ্যা (১, ২, ৩) অথবা অক্ষর (A, B, C) থাকে। এটি ক্রমবিন্যাসিত তালিকা প্রদর্শন করতে ব্যবহৃত হয়।- আইটেম ট্যাগ:
<ol>এর প্রতিটি আইটেম<li>(List Item) ট্যাগ ব্যবহার করে প্রদর্শিত হয়। - ব্যবহার: এমন তথ্য বা কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যেখানে আইটেমগুলোর ক্রম (অর্ডার) গুরুত্বপূর্ণ। উদাহরণস্বরূপ, স্টেপ-বাই-স্টেপ নির্দেশিকা, রান্নার রেসিপি, বা কাজের তালিকা।
উদাহরণ
<ol>
<li>Install an HTML Editor</li>
<li>Write HTML Code</li>
<li>Preview the HTML Page</li>
</ol>
ফলাফল: উপরের উদাহরণে, একটি Ordered List তৈরি করা হয়েছে, যেখানে আইটেমগুলো (Install an HTML Editor, Write HTML Code, Preview the HTML Page) ১, ২, ৩ নম্বর সহ প্রদর্শিত হবে।
CSS ব্যবহার করে Ordered List কাস্টমাইজেশন
<style>
ol {
list-style-type: upper-roman; /* সংখ্যার পরিবর্তে রোমান নম্বর ব্যবহার করা হয়েছে */
}
</style>
<ol>
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ol>
ব্যাখ্যা:
list-style-type: CSS প্রপার্টি ব্যবহার করে লিস্টের নম্বর স্টাইল পরিবর্তন করা হয়েছে। এখানে, ডিফল্ট নম্বর (১, ২, ৩) পরিবর্তন করে রোমান নম্বর (I, II, III) করা হয়েছে।
Unordered List এবং Ordered List এর পার্থক্য
| বৈশিষ্ট্য | Unordered List (<ul>) | Ordered List (<ol>) |
|---|---|---|
| ক্রম | ক্রমহীন | ক্রমবিন্যাসিত |
| প্রিফিক্স | বুলেট পয়েন্ট (•) | সংখ্যা (1, 2, 3) বা অক্ষর (A, B, C) |
| স্টাইল | list-style-type দিয়ে বুলেট পরিবর্তন করা যায় | list-style-type দিয়ে নম্বর বা অক্ষর পরিবর্তন করা যায় |
| ব্যবহারের উদাহরণ | প্রোডাক্টের তালিকা, ফিচার লিস্ট | স্টেপ-বাই-স্টেপ নির্দেশিকা, কাজের তালিকা |
Content added By
Read more
